<!DOCTYPE html>
<html lang="en">
<head>
    <title>Necross-Account</title>
    <meta charset="UTF-8">
    <!--引入 Google Icon Font-->
    <link href="css/iconFont.css" rel="stylesheet">
    <!--引入 materialize.css-->
    <link type="text/css" rel="stylesheet" href="./materialize/css/materialize.min.css" media="screen,projection"/>
    <!--响应式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--公用自定义样式-->
    <link rel="stylesheet" href="./css/public.css">
    <!--响应式样式-->
    <link rel="stylesheet" href="./css/account/responsive.css">
    <!--私有自定义样式-->
    <link rel="stylesheet" href="./css/account/style.css">
    <!--强制样式-->
</head>
<body>
<header>
    <ul id='download' class='dropdown-content'>
        <li><a class="light-green-text text-darken-2" href="https://github.com/shadowsocks/shadowsocks-windows/releases"
               target="_blank"><i class="material-icons right">desktop_windows</i>Windows</a></li>
        <li><a class="light-green-text text-darken-2" href="https://github.com/shadowsocks/ShadowsocksX-NG/releases"
               target="_blank"><i class="material-icons right">desktop_mac</i>Mac OS X</a></li>
        <li><a class="light-green-text text-darken-2"
               href="https://github.com/shadowsocks/shadowsocks-qt5/wiki/Installation" target="_blank"><i
                class="material-icons right">computer</i>Linux</a></li>
        <li class="divider"></li>
        <li><a class="light-green-text text-darken-2"
               href="https://play.google.com/store/apps/details?id=com.github.shadowsocks" target="_blank"><i
                class="material-icons right">phone_android</i>Android</a></li>
        <li><a class="light-green-text text-darken-2"
               href="https://itunes.apple.com/app/apple-store/id1070901416?pt=2305194&ct=shadowsocks.org&mt=8"
               target="_blank"><i class="material-icons right">phone_iphone</i>iOS</a></li>
        <li class="divider"></li>
        <li><a class="light-green-text text-darken-2" href="https://github.com/shadowsocks/shadowsocks-libev/releases"
               target="_blank"><i class="material-icons right">cast</i>OpenWRT</a></li>
    </ul>
    <div class="navbar-fixed">
        <nav class="light-green darken-2">
            <div class="nav-wrapper container">
                <a href="./index.html" class="logo blod">Necross</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a class="dropdown-button" data-activates='download' href="#"><i class="material-icons right">file_download</i>Downloads</a>
                    </li>
                    <li><a href="./doc.html"><i class="material-icons right">chrome_reader_mode</i>Documentation</a>
                    </li>
                    <li><a href="./account.html"><i class="material-icons right">account_box</i>Account</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>
<main>
    <div class="block light-green darken-2 white-text">
        <div class="container">
            <div class="row center">
                <div class="col s12">
                    <br><br><br>
                    <img class="hoverable circle" src="https://dummyimage.com/100x100/ffffff/689f38.png&text=N"
                         alt="" style="width: 100px;">
                    <div class="username">
                        KeJun<span class="rights badge center">Admin</span>
                    </div>
                </div>
                <div class="col s12">
                    <ul class="tabs light-green darken-2" style="overflow: hidden;">
                        <li class="tab col s4"><a href="#nodeList">Node List</a></li>
                        <li class="tab col s4"><a href="#userCenter">User Center</a></li>
                        <li class="tab col s4"><a href="#systemSettings">System Settings</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="nodeList" class="col s12">
            <div class="row">
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title activator light-green-text text-darken-2">Canada-0<i class="material-icons right">more_vert</i>
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">ca1.necross.ml</span>Node address</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1025</span>Connect port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">954</span>Online user</a>
                            </div>
                        </div>
                        <div class="card-reveal" style="overflow: hidden;">
                        <span class="card-title light-green-text text-darken-2 center">
                            <i class="material-icons right">close</i>
                            <img src="./images/qrcode.png" alt="">
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title activator light-green-text text-darken-2">Canada-0<i class="material-icons right">more_vert</i>
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">ca1.necross.ml</span>Node address</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1025</span>Connect port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">954</span>Online user</a>
                            </div>
                        </div>
                        <div class="card-reveal" style="overflow: hidden;">
                        <span class="card-title light-green-text text-darken-2 center">
                            <i class="material-icons right">close</i>
                            <img src="./images/qrcode.png" alt="">
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title activator light-green-text text-darken-2">Canada-0<i class="material-icons right">more_vert</i>
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">ca1.necross.ml</span>Node address</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1025</span>Connect port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">954</span>Online user</a>
                            </div>
                        </div>
                        <div class="card-reveal" style="overflow: hidden;">
                        <span class="card-title light-green-text text-darken-2 center">
                            <i class="material-icons right">close</i>
                            <img src="./images/qrcode.png" alt="">
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title activator light-green-text text-darken-2">Canada-0<i class="material-icons right">more_vert</i>
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">ca1.necross.ml</span>Node address</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1025</span>Connect port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">954</span>Online user</a>
                            </div>
                        </div>
                        <div class="card-reveal" style="overflow: hidden;">
                        <span class="card-title light-green-text text-darken-2 center">
                            <i class="material-icons right">close</i>
                            <img src="./images/qrcode.png" alt="">
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col s12 m6 l4">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title activator light-green-text text-darken-2">Canada-0<i class="material-icons right">more_vert</i>
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">ca1.necross.ml</span>Node address</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1025</span>Connect port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">954</span>Online user</a>
                            </div>
                        </div>
                        <div class="card-reveal" style="overflow: hidden;">
                        <span class="card-title light-green-text text-darken-2 center">
                            <i class="material-icons right">close</i>
                            <img src="./images/qrcode.png" alt="">
                        </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="userCenter" class="col s12">
            <div class="row">
                <div class="col s12">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title light-green-text text-darken-2">Account Info
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">KeJun</span>User name</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">2454787839@qq.com</span>Email</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">9.55GB</span>Used Data Traffic</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">2028-6-12</span>Expiration Date</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">9999</span>Days Remaining</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col s12">
                    <div class="card hoverable">
                        <div class="card-content">
                            <p class="card-title light-green-text text-darken-2">Connection Info
                            </p>
                            <div class="collection">
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">1026</span>Connection port</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">123456</span>Connection password</a>
                                <a href="#!" class="collection-item light-green-text text-darken-2"><span class="light-green darken-2 white-text badge">rc4-md5</span>Encryption mode</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="systemSettings" class="col s12">
            <div class="row">
                <div class="col s12">
                    <form action="" method="post">
                        <ul class="collapsible popout light-green-text text-darken-2" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header"><i class="material-icons">portrait</i>User Name<span class=" new system badge">KeJun</span></div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        <div class="container">
                                            <div class="input-field col s10">
                                                <input placeholder="KeJun" id="user_name" type="text" class="validate system-input">
                                            </div>
                                            <button class="light-green darken-2 btn col s2" type="submit" name="action">Submit
                                                <i class="material-icons right">send</i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">remove</i>User Password<span class=" new system badge">*******</span></div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        <div class="container">
                                            <div class="input-field col s10">
                                                <input placeholder="*******" id="user_pass" type="password" class="validate system-input">
                                            </div>
                                            <button class="light-green darken-2 btn col s2" type="submit" name="action">Submit
                                                <i class="material-icons right">send</i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">vpn_key</i>Connection password<span class=" new system badge">123456</span></div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        <div class="container">
                                            <div class="input-field col s10">
                                                <input placeholder="123456" id="conn_pass" type="text" class="validate system-input">
                                            </div>
                                            <button class="light-green darken-2 btn col s2" type="submit" name="action">Submit
                                                <i class="material-icons right">send</i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">g_translate</i>Language<span class=" new system badge">EN</span></div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        <div class="container">
                                            <div class="input-field col s10">
                                                <select>
                                                    <option value="1">EN</option>
                                                    <option class="active" value="2">ZH-CN</option>
                                                </select>
                                            </div>
                                            <button class="light-green darken-2 btn col s2" type="submit" name="action">Submit
                                                <i class="material-icons right">send</i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header"><i class="material-icons">view_carousel</i>Theme<span class=" new system badge">Green</span></div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        <div class="container">
                                            <div class="input-field col s10">
                                                <select>
                                                    <option value="1">Green</option>
                                                    <option value="2">Blue</option>
                                                    <option value="2">Grey</option>
                                                </select>
                                            </div>
                                            <button class="light-green darken-2 btn col s2 right" type="submit" name="action">Submit
                                                <i class="material-icons right">send</i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
<footer class="page-footer light-green darken-2">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Necross</h5>
                <p class="grey-text text-lighten-4">Free internet access</p>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            © Necross Powered by KeJun Theme by KeJun
        </div>
    </div>
</footer>
<!-- 引入 jQuery 和 materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./materialize/js/materialize.min.js"></script>
<!--引入公用js-->
<script type="text/javascript" src="./js/public.js"></script>
<!--引入materialize插件初始化js-->
<script type="text/javascript" src="./js/account/materializeInitialization.js"></script>
</body>
</html>